<template>
	<view class="grid grid-cols-4 gap-2">
		<view class="rounded-xl overflow-hidden bg-white pb-1" v-for="(item, index) in data" :key="index"
			@click="goto(item.url)">
			<u-notice-bar speed="50" class="w-1/3 !py-1  !bg-none mr-auto rounded-br-xl" v-if="item.tags"
				:text="item.tags[0]" icon color="white" bgColor="#ef4444" style="font-size: 0.75rem;">
			</u-notice-bar>
			<u-notice-bar v-else speed="50" class="w-1/3 !py-1  !bg-none mr-auto rounded-br-xl !opacity-0"
				:text="'12346'" icon color="white" bgColor="#ef4444">
			</u-notice-bar>
			<view class="py-3 flex flex-col items-center">
				<!-- <image class="w-14 h-14   rounded-xl overflow-hidden border border-black  pt-2" :src="item.image" mode="aspectFill">
				</image> -->
				<up-image width="3.5rem" height="3.5rem" class=" pt-2" :src="item.image"  radius="0.75rem">  </up-image>
				<text class="text-l px-1 py-1 rounded-md w-[100%]  text-center  mt-1"
					style="color: #591da5;font-size: 0.75rem;">{{ item.type ?? item.cate_type }}</text>
				<text class=" text-l py-1 text-nowrap" style="font-weight: 600;font-size: 0.75rem;">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps(['data'])
const goto = (url) => {
	window.location.href = url
}
</script>

<style lang="scss"></style>